body {
    color: #444;
    font-size: 14px;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #eee;
    overflow-x: hidden;
}

a:hover {
    text-decoration: none;
}

ul li {
    list-style: none;
}

.wrapper {
    max-width: 1440px;
    margin: 0 auto;

    .topnav {
        display: none;
        margin-bottom: 10px;
        width: 100%;
        height: 50px;
        overflow-x: auto;
        white-space: nowrap;
        background-color: white;

        ul {
            height: 100%;
            border-bottom: 1px solid #ccc;

            li {
                display: inline-block;
                padding: 17px 0;

                i {
                    color: #666;
                    margin-right: 5px;
                }

                a {
                    padding: 0 10px 0 12px;
                    color: #666;
                    border-right: 1px solid #ccc;
                }

                a:hover {
                    text-decoration: none;
                }
            }

            li:last-of-type a {
                border: none;
            }

        }
    }

    .header {
        position: fixed;
        width: 190px;
        height: 100%;
        background-color: white;

        .logo {
            width: 190px;
            height: 120px;
            background: #ff5e52;
        }

        .nav {
            li {
                display: list-item;
                text-align: -webkit-match-parent;

                i {
                    color: #666;
                    margin-right: 15px;
                }

                a {
                    display: block;
                    padding: 12px 25px;
                    color: #666;
                }

                a:hover {
                    text-decoration: none;
                }
            }

            li:last-child {
                border-bottom: 1px solid #eee;
            }

            li:hover i,
            li:hover a {
                color: black;
            }
        }

        .search {
            margin-right: 0;
            margin-bottom: 15px;
            padding: 20px 15px;
            border-bottom: 1px solid #eee;

            input {
                float: left;
                box-sizing: border-box;
            }

            input.keys {
                padding: 5px 5px 5px 10px;
                width: 112px;
                height: 34px;
                color: #666;
                outline: none;
                border: 1px solid #ccc;
                border-right: none;
            }

            input.btn {
                width: 48px;
                height: 34px;
                font-size: 13px;
                color: white;
                background-color: #ff5e52;
                border: 0 none;
                border-radius: 0;
                opacity: .85;
            }
        }
    }

    .aside {
        margin: 20px;
        float: right;
        background: none;

        .widgets {
            margin-bottom: 20px;
            padding: 15px 20px;
            width: 280px;
            background-color: white;

            h4 {
                display: inline-block;
                font-weight: 600;
                font-size: 20px;
                border-bottom: 2px solid orange;
            }

            .body {
                clear: both;
            }

            .search {
                padding-top: 10px;

                input {
                    display: inline-block;
                    height: 100%;
                    box-sizing: border-box;
                }

                input.keys {
                    float: left;
                    padding-left: 15px;
                    width: 170px;
                    height: 34px;
                    color: #666;
                    outline: none;
                    border: 2px solid #DDD;
                    border-right: none;
                }

                input.btn {
                    width: 70px;
                    height: 34px;
                    font-size: 13px;
                    color: white;
                    background-color: #ff5e52;
                    border: 0 none;
                    border-radius: 0;
                    opacity: .85;
                }
            }

            .random {
                padding: 0;

                li {
                    padding: 10px 0;
                    list-style: none;
                    border-bottom: 1px solid #ccc;

                    p {
                        margin: 0;
                        clear: both;
                        line-height: 20px;
                    }

                    .info {
                        display: inline-block;
                        margin-right: 10px;
                        width: 150px;

                        .title {
                            width: 160px;
                            font-size: 14px;
                            color: #444;
                        }

                        .read-number {
                            font-size: 12px;
                            color: #999;
                        }
                    }

                    .pic {
                        display: inline-block;
                        width: 70px;
                        vertical-align: text-bottom;

                        img {
                            width: 100%;
                        }
                    }
                }

                li:hover .info .title {
                    color: orangered;
                }

                li:hover {
                    background-color: #F8FCFE;
                }

                li:last-of-type {
                    border: none;
                }
            }

            .new-comment {
                padding: 0;

                li {
                    color: #999;
                    height: 60px;
                    border-bottom: 1px solid #ccc;
                    padding: 10px 0;

                    p {
                        height: 20px;
                        line-height: 20px;
                        margin: 0;
                        font-size: 12px;
                    }

                    .avatar {
                        float: left;
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .text {
                        margin-left: 50px;
                    }
                }

                li:hover {
                    background-color: #eee;
                }
            }
        }
    }

    .content {
        margin: 0 0 0 190px;
        padding: 20px;
        width: 950px;

        .hots {
            ul {
                padding: 0;

                li {
                    display: inline-block;
                    margin-right: 5px;
                    width: 24%;
                    font-size: 14px;
                    overflow: hidden;

                    a {
                        color: #666;
                        margin: 0;

                        img {
                            display: block;

                            max-width: 100%;
                            width: 100%;
                            max-height: 100%;
                            height: 132px;
                            margin-bottom: 5px;
                        }
                    }
                }
            }
        }

        .panel {
            margin-bottom: 20px;
            padding: 15px 20px;
            width: 100%;
            background-color: white;

            .entry {
                width: 100%;
                padding-bottom: 20px;
                border-bottom: 1px solid #eee;

                h4 {
                    display: inline-block;
                    font-weight: 600;
                    font-size: 20px;
                    border-bottom: 2px solid orange;
                }

                .body {
                    clear: both;
                }

                .head {
                    width: 100%;
                    line-height: 22px;

                    .sort {
                        position: relative;
                        display: block;
                        float: left;
                        margin-right: 10px;
                        padding: 0 10px;
                        height: 24px;
                        line-height: 24px;
                        color: #fff;
                        background-color: #ff5e52;
                        font-size: 12px;
                    }

                    .sort::after {
                        content: '';
                        display: block;
                        position: absolute;
                        top: 6px;
                        right: -6px;
                        width: 10px;
                        height: 10px;
                        background-color: #ff5e52;
                        // border: 4px solid #ff5e52;
                        border-top-left-radius: 5px;
                        border-bottom-left-radius: 5px;
                        clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%);
                    }

                    a {
                        color: #444;
                        font-size: 22px;
                        transition: all 0.5s;
                    }

                    a:hover {
                        color: orange;
                    }
                }

                .main {
                    width: 100%;

                    p {
                        float: left;
                        width: 75%;
                    }

                    .info {
                        margin-top: 10px;
                        color: #999;
                        font-size: 12px;
                    }

                    .brief {
                        color: #777;
                    }

                    .extra {
                        font-size: 12px;
                        color: #999;

                        span {
                            margin-right: 20px;
                        }

                        a {
                            color: #999;
                            margin-right: 20px;

                            span {
                                text-decoration: underline;
                            }
                        }
                    }

                    .thumb {
                        display: inline-block;
                        margin-left: 5%;
                        width: 20%;


                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .entry:last-of-type {
                border: none;
            }

        }

        .footer {
            p {
                font-size: 12px;
                color: #999;
            }
        }
    }
}